<template>
  <div class="main">
    <ul class="home_left_node_list">
      <li
        v-for="(item, index) in noteList"
        :key="index"
        @click="chooseNote(item, index)"
        :class="index === activeIndex ? 'bg_active' : 'bg_normal'"
      >
        {{ item.t }}
      </li>
    </ul>
    <div class="home_right">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    chooseNote(item, index) {
      this.activeIndex = index;
      if (this.$route.path == item.routePath) {
        return;
      }
      this.$router.push(item.routePath);
    }
  },
  mounted() {
    this.chooseNote(this.noteList[0], 0);
  },
  data() {
    return {
      md: "",
      activeIndex: 0,
      noteList: [
        {
          t: "搭建Vue环境",
          routePath: "/home/creatEnVue"
        },
        {
          t: "Vue钩子函数",
          routePath: "/home/hook"
        },
        {
          t: "mvvm",
          routePath: "/home/mvvm"
        },
        {
          t: "组件间通讯",
          routePath: "/home/cc"
        },
        {
          t: "ES6",
          routePath: "/home/es6"
        },
        {
          t: "Axios",
          routePath: "/home/axios"
        },
        {
          t: "VueRouter",
          routePath: "/home/router"
        },
        {
          t: "Vant",
          routePath: "/home/vant"
        },
        {
          t: "Vuex",
          routePath: "/home/vuex"
        },
        {
          t: "stylus",
          routePath: "/home/pleaseExpire"
        },
        {
          t: "better-scroll",
          routePath: "/home/pleaseExpire"
        },
        {
          t: "屏幕适配",
          routePath: "/home/pleaseExpire"
        },

        {
          t: "webpack配置",
          routePath: "/home/pleaseExpire"
        }
      ]
    };
  }
};
</script>
<style scoped lang="stylus">
@import "../styles/common_color.styl"

.ul {

}

.main {
    background white;
    display flex;
    width 100%;
    height: 100%;

}

.home_left_node_list {
    display flex;
    flex-direction column;
    width 20%;
    height 100%;
    border-right: 1px solid $line;
    li {
        font-size 20px;
        font-weight bold;
        line-height 30px;
        border-bottom $line solid 1px;
        text-align center;
        padding 12px 16px;
        cursor: pointer;
    }
    .bg_normal {
        background-color #EDEDF0
        color: $text_caption

    }
    .bg_active {
        background-color #C9DBFF
        color: #0055ff

    }
}

.home_right {
    background-color #ffffff;
    display flex;
    width 100%;
    height 100vm;
    flex-grow 1;
}
</style>
